<template>
  <h1>用户列表</h1>
  <hr />
  <el-table :data="userList" style="width: 100%" height="95%" v-loading="loading">
    <el-table-column fixed prop="userid" label="用户id" width="200" />
    <el-table-column prop="username" label="姓名" width="80" />
    <el-table-column prop="password" label="密码" width="180" />
    <el-table-column prop="tel" label="电话号码" width="180" />
    <el-table-column prop="telcode" label="号码区号" width="80" />
    <el-table-column prop="email" label="邮箱" width="110" />
    <el-table-column prop="nickname" label="昵称" width="110" />
    <el-table-column prop="qq" label="QQ" width="110" />
    <el-table-column prop="wx" label="微信" width="110" />
    <!-- <el-table-column prop="avatar" label="头像" width="110" /> -->
    <el-table-column label="头像" width="150">
      <template #default="scope">
        <img class="avatar" :src="scope.row.avatar" />
      </template>
    </el-table-column>
    <el-table-column prop="sex" label="性别" width="80">
      <template #default="scope">
        <span>{{ scope.row.sex == -1 ? "男" : "女" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="birthday" label="生日" width="110" />
    <el-table-column prop="createTime" label="创建时间" width="150" />
  </el-table>
</template>

<script lang="ts" setup>
import { reactive,ref } from "vue";
import service from "../../../utils/service";

const loading = ref(true)

// 商品数据
interface IUser {
  userid: string;
  username:string;
  password:string;
  tel: string;
  telcode: string;
  email: string;
  nickname: string;
  qq: string;
  wx: string;
  avatar: string;
  sex:number;
  birthday: string;
  createTime: string;
}
const userList = reactive<IUser[]>([]);

// 获取用户列表
const getUserList = () => {
  service({
    url: "/admin/user/list",
  }).then((res) => {
    if (res.data.code === "200") {
      userList.push(...res.data.data);
      loading.value = false
    }
  });
};
getUserList();

</script>

<style scoped>
.avatar{
  width: 150px;
  height: 150px;
}
</style>